<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#main {
				margin: 0 auto;
				width: 410px;
				min-height: 60px;
				border: 1px solid #A1A1A3;
			}
			
			#denglu,
			#zhuce {
				float: left;
				width: 50%;
				text-align: center;
				line-height: 60px;
				font-family: "微软雅黑";
				font-weight: bold;
				color: #A1A1A3;
				padding-bottom: 10px;
			}
			
			#denglu:hover,
			#zhuce:hover {
				cursor: pointer;
			}
			
			#title {
				height: 60px;
				border-bottom: 2px solid #F2F2F2;
			}
			
			.span {
				padding: 20px;
				border-bottom: 2px solid #959798;
			}
			
			#deng_lu {
				height: 230px;
				font-weight: bold;
				font-family: "微软雅黑";
				padding-top: 30px;
				text-align: center;
				display: none;
			}
			
			#deng_lu input {
				width: 230px;
				height: 35px;
				border: 2px solid #EDEEED;
				border-radius: 5px;
				margin-left: 20px;
			}
			
			#deng_lu input[type=button] {
				width: 145px;
				height: 40px;
				margin-top: 20px;
				outline: 0px;
				font-family: "微软雅黑";
				font-size: 18px;
				color: white;
				border: 0px;
				border-radius: 4px;
				background-color: #2194DE;
			}
			
			#deng_lu input[type=button]:active {
				background-color: #21A2F7;
			}
			
			#zhu_ce {
				font-weight: bold;
				font-family: "微软雅黑";
				padding-top: 30px;
				text-align: center;
				margin-bottom: 40px;
			}
			
			#zhu_ce input {
				width: 230px;
				height: 35px;
				border: 2px solid #EDEEED;
				border-radius: 5px;
				margin-left: 20px;
			}
			
			#zhu_ce input[type=button] {
				width: 145px;
				height: 40px;
				margin-top: 20px;
				outline: 0px;
				font-family: "微软雅黑";
				font-size: 18px;
				color: white;
				border: 0px;
				border-radius: 4px;
				background-color: #2194DE;
			}
			
			#zhu_ce input[type=button]:active {
				background-color: #21A2F7;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div id="title">
				<div id="denglu">
					<span>
						快速登录
					</span>
				</div>
				<div id="zhuce">
					<span>
						快速注册
					</span>
				</div>
			</div>
			<div id="deng_lu">
				<p>账号:<input type="text" id="deng_lu_username" /></p>
				<p>密码:<input type="password" id="deng_lu_pwd" /></p>
				<input type="button" value="登录" id="btndenglu" onclick="denglu()" />
			</div>
			<div id="zhu_ce">
				<p>账号:<input type="text" id="zhu_ce_username" /></p>
				<p>密码:<input type="password" id="zhu_ce_pwd" /> </p>
				<!--<p>重复密码:<input type="password" id="zhu_ce_repwd" /> </p>-->
				<input type="button" value="注册" onclick="zhuce()" />
			</div>
		</div>

	</body>
	<script src="//cdn.socket.io/socket.io-1.4.5.js"></script>
	<script src="js/jquery-1.11.0.js"></script>
	<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
	<script src='js/jmessage-sdk-web-2.1.0.min.js'></script>
	<script type="text/javascript">
		$("#denglu").click(function() {
			$("#deng_lu").show();
			$("#zhu_ce").hide();
		})
		$("#zhuce").click(function() {
			$("#zhu_ce").show();
			$("#deng_lu").hide();
		})

		var JIM = new JMessage();
		var appkey = "5878e904610f77f3e4f252ee";
		var timestamp = new Date().getTime();
		var random_str = "022cd9fd995849b58b3ef0e943421ed9";
		var secret = "da9f91355f6db5400b3bb6b6";
		signature = md5_cmn(appkey, timestamp, random_str, secret);
		JIM.init({
			"appkey": "5878e904610f77f3e4f252ee",
			"random_str": "022cd9fd995849b58b3ef0e943421ed9",
			"signature": signature,
			"timestamp": timestamp
		}).onSuccess(function(data) {
			//do something
			console.log("初始化成功");
		}).onFail(function(data) {
			// do something
			console.log("初始化失败");
		})
		//注册
		function zhuce() {
			var zhucename = $("#zhu_ce_username").val();
			var zhucepwd = $("#zhu_ce_pwd").val();
			var zhucerepwd = $("#zhu_ce_repwd").val();
			JIM.register({
				'username': zhucename,
				'password': zhucepwd,
				'is_md5': false
			}).onSuccess(function(data) {
				//do somethins
				console.log("注册成功");
				$("#zhu_ce_username").val("");
				$("#zhu_ce_pwd").val("");
				$("#zhu_ce_repwd").val("");
				$("#denglu").click();

			}).onFail(function(data) {
				// do something
				console.log("注册失败");
			});
		}

		function denglu() {
			var dengluname = $("#deng_lu_username").val();
			var denglupwd = $("#deng_lu_pwd").val();

			JIM.login({
				'username': dengluname,
				'password': denglupwd
			}).onSuccess(function(data) {
				// do something
				console.log("登陆成功");
				console.log(location.href)
				//				location.href="聊天.html"
				var up = "?RetUrl=username=" + dengluname + "&password=" + denglupwd;
				var href = geturlitem(location.search, "RetUrl") + up;
				location.href = "聊天.html" + up;
				$("#deng_lu_username").val("");
				$("#deng_lu_pwd").val("");
			}).onFail(function() {
				console.log("登陆失败");
			});
		}

		function geturlitem(url, name) {
			urlstart = url.indexOf(name + "=");
			if(urlstart != -1) {
				urlstart = urlstart + name.length;
				urlend = url.indexOf("&", urlstart);
				if(urlend == -1) {
					urlend = url.length;
				}
				return url.substring(urlstart, urlend);

			}
			return "";
		}

		function getPageUrl() {
			var index = location.pathname.lastIndexOf("/"); + 1;
			var i = location.pathname.substr(index);
			return i;
		}
	</script>

</html>